<!doctype html>
<html>
  <head>
    <title>事件对象参数示例</title>
    <script src="https://unpkg.com/vue@3.4.0"></script>
    <style>
      .mouse-area {
        width: 400px;
        height: 300px;
        border: 2px solid #333;
        position: relative;
        margin: 20px;
      }
      .mouse-info {
        position: absolute;
        top: 10px;
        left: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 10px;
        border-radius: 5px;
      }
      .click-point {
        position: absolute;
        width: 10px;
        height: 10px;
        background: red;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>鼠标事件追踪</h2>
      <div
        class="mouse-area"
        @mousemove="handleMouseMove"
        @mousedown="handleMouseDown"
        @mouseup="handleMouseUp"
        @click="handleClick"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <div class="mouse-info">
          <div>鼠标位置：({{ mouseX }}, {{ mouseY }})</div>
          <div>相对位置：({{ relativeX }}, {{ relativeY }})</div>
          <div>按键状态：{{ mouseButtons }}</div>
          <div>鼠标在区域内：{{ isMouseInArea ? '是' : '否' }}</div>
          <div>点击次数：{{ clickCount }}</div>
        </div>

        <div
          v-for="point in clickPoints"
          :key="point.id"
          class="click-point"
          :style="{ left: point.x + 'px', top: point.y + 'px' }"
        ></div>
      </div>

      <button @click="clearPoints">清除点击记录</button>
    </div>

    <script>
      const { createApp, ref } = Vue

      createApp({
        setup() {
          const mouseX = ref(0)
          const mouseY = ref(0)
          const relativeX = ref(0)
          const relativeY = ref(0)
          const mouseButtons = ref('')
          const isMouseInArea = ref(false)
          const clickCount = ref(0)
          const clickPoints = ref([])
          let pointId = 1

          // 更新按键状态的通用函数
          const updateMouseButtons = event => {
            const buttons = []
            if (event.buttons & 1) buttons.push('左键')
            if (event.buttons & 2) buttons.push('右键')
            if (event.buttons & 4) buttons.push('中键')
            mouseButtons.value = buttons.join(', ') || '无'
          }

          const handleMouseMove = event => {
            // 获取鼠标在页面中的位置
            mouseX.value = event.clientX
            mouseY.value = event.clientY

            // 获取鼠标相对于目标元素的位置
            relativeX.value = event.offsetX
            relativeY.value = event.offsetY

            // 更新按键状态
            updateMouseButtons(event)
          }

          const handleMouseDown = event => {
            updateMouseButtons(event)
            console.log('鼠标按下：', event.button, '按键状态：', event.buttons)
          }

          const handleMouseUp = event => {
            updateMouseButtons(event)
            console.log('鼠标释放：', event.button, '按键状态：', event.buttons)
          }

          const handleClick = event => {
            clickCount.value++

            // 记录点击位置
            clickPoints.value.push({
              id: pointId++,
              x: event.offsetX,
              y: event.offsetY
            })

            // 限制点击记录数量
            if (clickPoints.value.length > 20) {
              clickPoints.value.shift()
            }

            console.log('点击事件详情：', {
              target: event.target,
              type: event.type,
              clientX: event.clientX,
              clientY: event.clientY,
              offsetX: event.offsetX,
              offsetY: event.offsetY,
              button: event.button,
              buttons: event.buttons
            })
          }

          const handleMouseEnter = event => {
            isMouseInArea.value = true
            console.log('鼠标进入区域', event.type)
          }

          const handleMouseLeave = event => {
            isMouseInArea.value = false
            console.log('鼠标离开区域', event.type)
          }

          const clearPoints = () => {
            clickPoints.value = []
            clickCount.value = 0
          }

          return {
            mouseX,
            mouseY,
            relativeX,
            relativeY,
            mouseButtons,
            isMouseInArea,
            clickCount,
            clickPoints,
            handleMouseMove,
            handleMouseDown,
            handleMouseUp,
            handleClick,
            handleMouseEnter,
            handleMouseLeave,
            clearPoints
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
